<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>函数的arguments</title>
  <!-- 
  在JavaScript中， `arguments` 对象是一个类数组对象，它包含了传递给函数的所有参数。 `arguments` 对象在函数内部可用，但在箭头函数中不可用。
  一、基本特性
  1. 类数组对象：
    -  `arguments` 对象类似于数组，但它不是一个真正的数组，因此没有数组的方法（如 `push` 、 `pop` 等）。
    - 你可以通过索引访问参数，例如 `arguments[0]` 、 `arguments[1]` 等。

  2. 包含所有参数：
    -  `arguments` 对象包含了传递给函数的所有参数，无论是命名参数还是未命名参数。

  二、使用示例
  1. 访问参数：
  function showArguments() {
      console.log(arguments);
  }

  showArguments(1, 'hello', true); // 输出: [1, "hello", true]
  2. 获取参数数量：
    -  `arguments.length` 属性返回传递给函数的参数个数。
  function countArguments() {
      console.log(arguments.length);
  }

  countArguments(1, 2, 3); // 输出: 3
  3. 遍历参数：
    - 可以使用 `for` 循环或 `Array.from()` 将 `arguments` 对象转换为真正的数组。
  function logArguments() {
      for (let i = 0; i < arguments.length; i++) {
          console.log(arguments[i]);
      }
  }

  logArguments('a', 'b', 'c'); // 输出: a, b, c

  // 转换为数组
  const argsArray = Array.from(arguments);
  console.log(argsArray); // 输出: ["a", "b", "c"]

  三、注意事项
  1. 箭头函数不支持：
    - 在箭头函数中， `arguments` 对象是不可用的。如果需要访问参数，可以直接使用参数列表。
  const arrowFunction = (...args) => {
      console.log(args); // 使用剩余参数语法
  };

  arrowFunction(1, 2, 3); // 输出: [1, 2, 3]
  2. 不推荐使用：
    - 在现代JavaScript中，推荐使用剩余参数语法 `(...args)` 来处理不定数量的参数，而不是使用 `arguments` 对象，因为 `arguments` 对象的使用可能会导致代码可读性降低。

  四、总结
  -  `arguments` 对象是一个类数组对象，包含传递给函数的所有参数。
  - 可以通过索引和 `length` 属性访问参数，但它不是一个真正的数组。
  - 在箭头函数中不可用，推荐使用剩余参数语法 `(...args)` 来处理不定数量的参数。
   -->
</head>
<body>

  <script>
    // 1. 获取参数：
    // `arguments` 对象是一个类数组对象，包含传递给函数的所有参数。
    function logArguments() {
      console.log(arguments); // 输出: Arguments(3) [1, "hello", true, callee: (...), Symbol(Symbol.iterator): ƒ]
    }

    logArguments(1, "hello", true); // 输出: 1, "hello", true

    // 2. 转换为数组：
    // 可以使用 `Array.from()` 方法将 `arguments` 对象转换为真正的数组。
    function funArguments() {
      const argsArray = Array.from(arguments);
      console.log(argsArray); // 输出: [1, "hello", true]
      const newArrgs = [...arguments];
      console.log(newArrgs); // 输出: [1, "hello", true]
      const newArrgs2 = Array.prototype.slice.call(arguments);
      console.log(newArrgs2); // 输出: [1, "hello", true]
      const newArrgs3 = [].slice.call(arguments);
      console.log(newArrgs3); // 输出: [1, "hello", true]
    }

    funArguments(1, "hello", true); 

    // 3. 箭头函数中不可用：
    // 在箭头函数中，`arguments` 对象不可用，因为箭头函数没有自己的 `arguments` 对象。
    const arrowFunction = (...args) => {
      console.log(args); // 使用剩余参数语法 输出: [1, "hello", true]
    };

    arrowFunction(1, "hello", true);

    // 4. 遍历arguments对象：
    // 可以使用 `for` 循环遍历 `arguments` 对象。
    function forArguments() {
      for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]); // 输出: 1, "hello", true
      }
      for (let arg of arguments) {
        console.log(arg); // 输出: 1, "hello", true
      }
    }

    forArguments(1, "hello", true); 
    
  </script>
  
</body>
</html>